<!-- 机构主页------------医生团队 ---------------- -->
<template>
	<view>
		<!-- 医生团队 ------------------------------------------------------- -->
		<view class="section-card">
			<view class="section-title">医生团队</view>
			<view class="team-list" v-for="(item, index) in doctorCard" :key="item._id">
				<view class="team-item">
					<image class="doctor-icon" :src="item.avatar"></image>
					<view class="doctor-info">
						<view class="doctor-name">{{ item.name }}</view>
						<view class="doctor-title">
							<text>{{ item.organizationId.address }} 距您4.9km</text>
						</view>
						<!-- 星星 -->
						<rate-star :rating="item.rate"></rate-star>
						<navigator
							:url="`/homepackge/pages/Teamhomepage/Teamhomepage?teamId=${item._id}&orgId=${institutionId}`">
							<view class="card-right">
								<image class="arrow-icon" src="/static/arrow-right.png"></image>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from 'vue';
	import {
		getDoctorSearchApi,
		getDoctorteamsApi
	} from '../../api/doctor';
	// 接收organization.vue接收的props
	const props = defineProps({
		organizationsDetailData: {
			type: Object,
			default: () => ({})
		},
		institutionId: {
			type: String,
			required: true
		}
	});
	const doctorCard = ref([]);

	// 页数和条数
	const pageData = ref({
		currentPage: 1,
		pageSize: 5,
	});
	onMounted(() => {
		getDoctorteams();
		// getDoctorSearch();
	});


	// 监听机构ID变化
	watch(() => props.institutionId, (newId) => {
		if (newId) {
			getDoctorteams();
			// getDoctorSearch();
		}
	});
	// 查询团队 ---- 医生卡包
	async function getDoctorteams() {
		try {
			console.log('请求医生团队数据...');
			const res = await getDoctorteamsApi({
				...pageData.value,
				organizationId: props.institutionId, //添加机构里面的参数来决定下面的医生团队有关系
			});
			if (res.code === 200) {
				console.log('医生团队数据获取成功:', res.data.rows.length, '条');
				doctorCard.value = res.data.rows;
			} else {
				console.error('请求失败:', res.message);
			}
		} catch (error) {
			console.error('网络错误:', error);
		}
	}
	// 查询团队 ---- 医生卡包


	// //查询医生getDoctorSearchApi 
	//医生的数据
	const roledoctorData = ref({});
	// //获取一个团队详情
	function getDoctorSearch() {
		//
		console.log('团队的teamhomeId.value', teamhomeId.value);
		getDoctorSearchApi({
			role: doctorId.value
		}).then(res => {
			if (res.code === 200) {
				console.log('团队详情数据:', res.data);
				teamhomeData.value = res.data || res.data.rows;
			}
		})
	}
</script>

<style scoped lang="scss">
	/* 医生团队整体容器 */
	.section-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		padding: 24rpx 32rpx;
		border-bottom: 2rpx solid #f5f5f5;
		/* 底部分割线 */
	}

	.team-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 20rpx;
	}

	.team-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		// transition: background-color 0.2s ease;
	}

	/* 医生头像 */
	.doctor-icon {
		width: 96rpx;
		height: 96rpx;
		border-radius: 16rpx;
		margin-right: 20rpx;
		object-fit: cover;
	}

	/* 医生信息内容容器 */
	.doctor-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		position: relative;
	}

	.doctor-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
		line-height: 1.2;
	}

	.doctor-title {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
		width: 380rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.card-right {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.arrow-icon {
		width: 32rpx;
		height: 32rpx;
		color: #999;
		left: 40rpx;
		// bottom: 5px;
		top: 10rpx;

	}
</style>